<template>
    <div class="produList">
        <router-link :to="`/details/${item.id}`" tag="div" class="content" v-for="item in product" :key="item.id" v-show="product.length > 0">
            <!-- <img :src="item.image" alt="" /> -->
            <!-- 图片懒加载,且图片显示不出来的时候使用默认图片  -->
            <van-image class="img" lazy-load :src="item.image" alt="">
                <template v-slot:error>
                    <img src="../assets/image/noGood.png" alt="" />
                </template>
            </van-image>

            <div class="bottom">
                <h3>{{ item.store_name }}</h3>
                <h4>￥{{ item.price }}</h4>
                <div>
                    <span>￥{{ item.vip_price }}</span>
                    <i>已售{{ item.sales }}件</i>
                </div>
            </div>
        </router-link>
    </div>
</template>

<script>
export default {
    props: {
        product: {
            type: Array,
            return: () => [],
        },
    },
};
</script>

<style lang="scss" scoped>
.produList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .content {
        // padding: 10px;
        margin-bottom: 10px;
        width: 172.5px;
        margin: 7px;

        .img {
            // padding-top: 10px;
            width: 100%;
            // height: 100%;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .bottom {
            background: #fff;
            padding: 0px 0px;
            h3 {
                width: 155.5px;
                font-size: 16px;
                padding-top: 10px;
                margin: 0 auto;
                // padding-bottom: 10px;
                word-break: keep-all; /* 不换行 */
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                text-overflow: ellipsis; /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
            }
            h4 {
                font-size: 16px;
                color: red;
                margin: 8px 0;
                font-weight: 700;
                margin-left: 5px;
            }
            div {
                font-size: 12px;
                width: 172.5px;
                display: flex;
                margin-left: 5px;
                justify-content: space-between;
                span {
                    font-size: 13px;
                    font-weight: 700;
                    position: relative;
                    &::after {
                        content: "";
                        width: 23px;
                        height: 10.5px;
                        background: url("../assets/image/vip.png") no-repeat center center / cover;
                        position: absolute;
                        top: 0%;
                        left: 100%;
                    }
                }
                i {
                    color: #ccc;
                    padding-bottom: 10px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
